<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业信息 - 招聘APP</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f9f9f9;
            height: 100vh;
        }
        .app-container {
            max-width: 390px;
            height: 100%;
            margin: 0 auto;
            background-color: white;
            overflow-y: auto;
        }
        .progress-bar {
            height: 4px;
            background-color: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: #1677ff;
            transition: width 0.3s;
        }
        .form-section {
            padding: 20px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .form-section:last-child {
            border-bottom: none;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: #1677ff;
            box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
            outline: none;
        }
        .btn-primary {
            background-color: #1677ff;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 15px;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-primary:hover {
            background-color: #0e5ecc;
        }
        .btn-outline {
            background-color: white;
            color: #1677ff;
            border: 1px solid #1677ff;
            border-radius: 8px;
            padding: 15px;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-outline:hover {
            background-color: #f0f7ff;
        }
        .tag {
            display: inline-block;
            padding: 8px 15px;
            border-radius: 20px;
            background-color: #f5f5f5;
            color: #666;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .tag.selected {
            background-color: #e6f4ff;
            color: #1677ff;
            border: 1px solid #91caff;
        }
        .logo-upload {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        .logo-upload img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
        }
        .logo-upload .upload-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background-color: #1677ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 390px;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: white;
            border-top: 1px solid #eee;
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        .bottom-nav a i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .bottom-nav a.active {
            color: #1677ff;
        }
        .step-nav {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .step-nav button {
            background: none;
            border: none;
            color: #1677ff;
            font-size: 14px;
            cursor: pointer;
        }
        .step-nav button:disabled {
            color: #ccc;
            cursor: not-allowed;
        }
        .job-card {
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            position: relative;
        }
        .job-card .job-actions {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 10px;
        }
        .job-card .job-actions button {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            transition: all 0.3s;
        }
        .job-card .job-actions button:hover {
            color: #1677ff;
        }
    </style>
</head>
<body>
    <div class="app-container relative">
        <div class="px-6 py-4">
            <div class="flex items-center justify-between mb-4">
                <h1 class="text-xl font-bold text-gray-800">完善企业信息</h1>
                <span class="text-sm text-gray-500">1/4</span>
            </div>
            
            <div class="progress-bar mb-6">
                <div class="progress-fill" style="width: 25%;"></div>
            </div>
            
            <!-- 步骤导航 -->
            <div class="step-nav">
                <button id="prev-btn" disabled><i class="fas fa-arrow-left mr-1"></i> 上一步</button>
                <button id="next-btn">下一步 <i class="fas fa-arrow-right ml-1"></i></button>
            </div>
            
            <!-- 步骤1：基本信息 -->
            <div id="step-1" class="step-content">
                <div class="form-section">
                    <div class="logo-upload mb-6">
                        <img src="https://images.unsplash.com/photo-1560179707-f14e90ef3623?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y29tcGFueSUyMGxvZ298ZW58MHx8MHx8&auto=format&fit=crop&w=200&h=200&q=80" alt="公司Logo">
                        <div class="upload-icon">
                            <i class="fas fa-camera"></i>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <div class="form-group">
                        <label for="company-name">公司名称</label>
                        <input type="text" id="company-name" class="form-control" placeholder="请输入公司全称">
                    </div>
                    <div class="form-group">
                        <label for="industry">所属行业</label>
                        <select id="industry" class="form-control">
                            <option value="">请选择</option>
                            <option value="tech">互联网/IT</option>
                            <option value="finance">金融</option>
                            <option value="education">教育</option>
                            <option value="medical">医疗健康</option>
                            <option value="retail">零售</option>
                            <option value="manufacture">制造业</option>
                            <option value="service">服务业</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="company-size">公司规模</label>
                        <select id="company-size" class="form-control">
                            <option value="">请选择</option>
                            <option value="1">0-20人</option>
                            <option value="2">20-99人</option>
                            <option value="3">100-499人</option>
                            <option value="4">500-999人</option>
                            <option value="5">1000-9999人</option>
                            <option value="6">10000人以上</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="company-type">公司性质</label>
                        <select id="company-type" class="form-control">
                            <option value="">请选择</option>
                            <option value="private">民营企业</option>
                            <option value="state">国有企业</option>
                            <option value="foreign">外资企业</option>
                            <option value="joint">合资企业</option>
                            <option value="listed">上市公司</option>
                            <option value="startup">创业公司</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- 步骤2：详细信息 -->
            <div id="step-2" class="step-content hidden">
                <div class="form-section">
                    <div class="form-group">
                        <label for="funding">融资阶段</label>
                        <select id="funding" class="form-control">
                            <option value="">请选择</option>
                            <option value="seed">种子轮</option>
                            <option value="angel">天使轮</option>
                            <option value="a">A轮</option>
                            <option value="b">B轮</option>
                            <option value="c">C轮</option>
                            <option value="d">D轮及以上</option>
                            <option value="listed">已上市</option>
                            <option value="none">未融资</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="address">公司地址</label>
                        <input type="text" id="address" class="form-control" placeholder="请输入公司详细地址">
                    </div>
                    <div class="form-group">
                        <label for="website">公司网站</label>
                        <input type="url" id="website" class="form-control" placeholder="请输入公司官网网址">
                    </div>
                </div>
                
                <div class="form-section">
                    <div class="form-group">
                        <label for="contact-name">联系人姓名</label>
                        <input type="text" id="contact-name" class="form-control" placeholder="请输入联系人姓名">
                    </div>
                    <div class="form-group">
                        <label for="contact-position">联系人职位</label>
                        <input type="text" id="contact-position" class="form-control" placeholder="请输入联系人职位">
                    </div>
                    <div class="form-group">
                        <label for="contact-phone">联系电话</label>
                        <input type="tel" id="contact-phone" class="form-control" placeholder="请输入联系电话" maxlength="11">
                    </div>
                    <div class="form-group">
                        <label for="contact-email">联系邮箱</label>
                        <input type="email" id="contact-email" class="form-control" placeholder="请输入联系邮箱">
                    </div>
                </div>
            </div>
            
            <!-- 步骤3：公司介绍 -->
            <div id="step-3" class="step-content hidden">
                <div class="form-section">
                    <div class="form-group">
                        <label for="company-intro">公司简介</label>
                        <textarea id="company-intro" class="form-control" rows="5" placeholder="请简要介绍公司的业务、产品和文化等"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="company-benefits">公司福利</label>
                        <textarea id="company-benefits" class="form-control" rows="3" placeholder="请描述公司提供的福利待遇"></textarea>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2 class="text-lg font-semibold mb-4">上传公司环境照片</h2>
                    <p class="text-gray-500 mb-4">展示公司办公环境，吸引更多人才</p>
                    
                    <div class="grid grid-cols-3 gap-3 mb-4">
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center cursor-pointer">
                            <i class="fas fa-plus text-gray-400"></i>
                        </div>
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center cursor-pointer">
                            <i class="fas fa-plus text-gray-400"></i>
                        </div>
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center cursor-pointer">
                            <i class="fas fa-plus text-gray-400"></i>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2 class="text-lg font-semibold mb-4">选择公司标签</h2>
                    <p class="text-gray-500 mb-4">请选择最能代表贵公司的标签，最多可选择10个</p>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">公司文化</h3>
                        <div class="tags-container">
                            <span class="tag">扁平管理</span>
                            <span class="tag">弹性工作</span>
                            <span class="tag">技术驱动</span>
                            <span class="tag">创新氛围</span>
                            <span class="tag">团队协作</span>
                            <span class="tag">绩效导向</span>
                            <span class="tag">快速成长</span>
                            <span class="tag">国际化</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">公司福利</h3>
                        <div class="tags-container">
                            <span class="tag">五险一金</span>
                            <span class="tag">年终奖金</span>
                            <span class="tag">带薪年假</span>
                            <span class="tag">定期体检</span>
                            <span class="tag">股票期权</span>
                            <span class="tag">免费班车</span>
                            <span class="tag">餐补</span>
                            <span class="tag">住房补贴</span>
                            <span class="tag">通讯补贴</span>
                            <span class="tag">节日福利</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">已选标签</h3>
                        <div id="selected-company-tags" class="mb-4">
                            <p class="text-gray-400">暂无选择</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 步骤4：职位发布 -->
            <div id="step-4" class="step-content hidden">
                <div class="form-section">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold">发布职位</h2>
                        <button class="text-blue-500" id="add-job-btn"><i class="fas fa-plus"></i> 添加职位</button>
                    </div>
                    
                    <div id="job-list">
                        <!-- 示例职位卡片 -->
                        <div class="job-card">
                            <div class="job-actions">
                                <button class="edit-job"><i class="fas fa-edit"></i></button>
                                <button class="delete-job"><i class="fas fa-trash"></i></button>
                            </div>
                            <h3 class="font-semibold text-lg mb-1">前端开发工程师</h3>
                            <div class="flex items-center text-gray-500 text-sm mb-2">
                                <span>15k-25k</span>
                                <span class="mx-2">·</span>
                                <span>北京</span>
                                <span class="mx-2">·</span>
                                <span>3-5年</span>
                            </div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded">React</span>
                                <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded">TypeScript</span>
                                <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded">前端</span>
                            </div>
                            <p class="text-gray-500 text-sm truncate">负责公司产品的前端开发工作，与产品、设计和后端团队协作...</p>
                        </div>
                        
                        <div class="job-card">
                            <div class="job-actions">
                                <button class="edit-job"><i class="fas fa-edit"></i></button>
                                <button class="delete-job"><i class="fas fa-trash"></i></button>
                            </div>
                            <h3 class="font-semibold text-lg mb-1">产品经理</h3>
                            <div class="flex items-center text-gray-500 text-sm mb-2">
                                <span>20k-30k</span>
                                <span class="mx-2">·</span>
                                <span>上海</span>
                                <span class="mx-2">·</span>
                                <span>5-7年</span>
                            </div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded">产品</span>
                                <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded">B端</span>
                                <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded">SaaS</span>
                            </div>
                            <p class="text-gray-500 text-sm truncate">负责公司核心产品的规划和迭代，推动产品从需求到落地的全流程...</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8 mb-20">
                    <button class="btn-primary" id="submit-company-btn">完成</button>
                </div>
            </div>
        </div>
        
        <!-- 移除底部导航 -->
    </div>

    <script>
        // 步骤切换逻辑
        const steps = document.querySelectorAll('.step-content');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const progressFill = document.querySelector('.progress-fill');
        const stepIndicator = document.querySelector('.text-sm.text-gray-500');
        let currentStep = 1;
        
        function showStep(stepNumber) {
            steps.forEach((step, index) => {
                if (index + 1 === stepNumber) {
                    step.classList.remove('hidden');
                } else {
                    step.classList.add('hidden');
                }
            });
            
            // 更新进度条和步骤指示器
            progressFill.style.width = `${stepNumber * 25}%`;
            stepIndicator.textContent = `${stepNumber}/4`;
            
            // 更新按钮状态
            prevBtn.disabled = stepNumber === 1;
            if (stepNumber === 4) {
                nextBtn.textContent = '完成';
            } else {
                nextBtn.innerHTML = '下一步 <i class="fas fa-arrow-right ml-1"></i>';
            }
            
            currentStep = stepNumber;
        }
        
        prevBtn.addEventListener('click', () => {
            if (currentStep > 1) {
                showStep(currentStep - 1);
            }
        });
        
        nextBtn.addEventListener('click', () => {
            if (currentStep < 4) {
                showStep(currentStep + 1);
            } else {
                // 提交表单
                window.location.href = 'card-matching-company.html';
            }
        });
        
        document.getElementById('submit-company-btn').addEventListener('click', () => {
            window.location.href = 'card-matching-company.html';
        });
        
        // 标签选择逻辑
        const tags = document.querySelectorAll('.tag');
        const selectedTagsContainer = document.getElementById('selected-company-tags');
        const selectedTags = new Set();
        
        tags.forEach(tag => {
            tag.addEventListener('click', () => {
                if (tag.classList.contains('selected')) {
                    tag.classList.remove('selected');
                    selectedTags.delete(tag.textContent);
                } else {
                    if (selectedTags.size < 10) {
                        tag.classList.add('selected');
                        selectedTags.add(tag.textContent);
                    } else {
                        alert('最多只能选择10个标签');
                    }
                }
                
                updateSelectedTags();
            });
        });
        
        function updateSelectedTags() {
            if (selectedTags.size === 0) {
                selectedTagsContainer.innerHTML = '<p class="text-gray-400">暂无选择</p>';
            } else {
                selectedTagsContainer.innerHTML = '';
                selectedTags.forEach(tagText => {
                    const tagElement = document.createElement('span');
                    tagElement.className = 'tag selected';
                    tagElement.textContent = tagText;
                    selectedTagsContainer.appendChild(tagElement);
                });
            }
        }
        
        // 添加职位逻辑
        document.getElementById('add-job-btn').addEventListener('click', () => {
            alert('打开添加职位表单');
            // 这里可以实现弹出添加职位的表单或跳转到职位编辑页面
        });
        
        // 编辑和删除职位
        document.querySelectorAll('.edit-job').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                alert('编辑职位');
            });
        });
        
        document.querySelectorAll('.delete-job').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                if (confirm('确定要删除这个职位吗？')) {
                    // 删除职位逻辑
                    btn.closest('.job-card').remove();
                }
            });
        });
    </script>
</body>
</html> 